<template>
  <a-card :bordered="false">
    <a-form-model ref="formRef" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-tabs :default-active-key="1" :tab-position="tabPosition" v-model="activeKey" @change="callback">
        <a-tab-pane v-for="item in tabTypes" :key="item.key">
          <span slot="tab">
            <img class="tab-img" v-if="item.key == 1" src="~@/assets/u5813.png" />
            <img class="tab-img" v-if="item.key == 2" src="~@/assets/u5806.png" />
            <img class="tab-img" v-if="item.key == 3" src="~@/assets/u5820.png" />
            {{ item.label }}
          </span>
          <!--异常出入岛人群挖掘-->
          <template v-if="activeKey === 1">
            <a-form-model-item :wrapper-col="{ span: 18, offset: 1 }" style="margin-left: 22px;">
              <a-radio-group v-model="trip" button-style="solid">
                <a-radio-button value="in"> 入岛 </a-radio-button>
                <a-radio-button value="out"> 出岛 </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="进入区域" v-if="trip === 'in'">
              <a-select mode="multiple" allowClear v-model="formData.in.area" placeholder="选择区域">
                <a-select-option v-for="item in dictOptions3" :key="item.code" :disabled="item.disabled">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="情报规则" v-if="trip === 'in'">
              前<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入12小时 </template>
                <a-input
                  class="input"
                  v-model="formData.in.beforeHours"
                  type="number"
                  :precision="0"
                  :min="0"
                  :max="12"
                  @input="preInput($event, 'beforeHours', 12)"
                  placeholder="输入小时"
                />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>
              小时岛内无信令位置信息，然后在区域内出现信令的人员
            </a-form-model-item>
            <a-form-model-item label="进入区域" v-if="trip === 'out'">
              <a-select mode="multiple" allowClear v-model="formData.out.area" placeholder="选择区域">
                <a-select-option v-for="item in dictOptions3" :key="item.code" :disabled="item.disabled">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="情报规则" v-if="trip === 'out'">
              前<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入24小时 </template>
                <a-input
                  class="input"
                  v-model="formData.out.beforeHours"
                  type="number"
                  :min="0"
                  :max="24"
                  @input="preInput($event, 'beforeHours', 24)"
                  placeholder="输入小时"
                />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>
              小时岛内有信令位置信息，然后在区域内出现信令后又无位置信息时长达
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30分钟 </template>
                <a-input
                  class="input"
                  v-model="formData.out.afterMinutes"
                  type="number"
                  :min="0"
                  :max="30"
                  @input="preInput($event, 'afterMinutes', 30)"
                  placeholder="输入分钟"
                />
                <a-icon type="info-circle" style="font-size: 14px;" /> </a-tooltip
              >分钟
            </a-form-model-item>
            <a-form-model-item label="是否开启">
              <a-switch v-model="formData.enabled" checked-children="开" un-checked-children="关" />
            </a-form-model-item>
          </template>
          <!--可疑船舶与人员关联-->
          <template v-if="activeKey === 2">
            <a-form-model-item label="进入区域">
              <a-select mode="multiple" allowClear v-model="formData.area" placeholder="选择区域">
                <a-select-option v-for="item in dictOptions3" :key="item.code" :disabled="item.disabled">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="情报规则">
              时间段在<a-time-picker
                v-model="formData.beginTime"
                class="input time"
                format="HH:mm"
                valueFormat="HH:mm"
              />点至
              <a-time-picker
                v-model="formData.endTime"
                class="input time"
                valueFormat="HH:mm"
                format="HH:mm"
              />点出现，且不属于该区域常住人员的人员； 常住人员定义为
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input
                  class="input"
                  v-model="formData.inDays"
                  type="number"
                  :min="0"
                  :max="30"
                  @input="preInput($event, 'inDays', 30)"
                  placeholder="输入天数"
                />
                <a-icon type="info-circle" style="font-size: 14px;" /> </a-tooltip
              >天内出现
              <a-input class="input" v-model="formData.appearTimes" placeholder="输入次数" type="number" />
              次及以上的人员
            </a-form-model-item>
            <a-form-model-item label="是否开启">
              <a-switch v-model="formData.enabled" checked-children="开" un-checked-children="关" />
            </a-form-model-item>
          </template>
          <!--消费行为异常人员挖掘-->
          <template v-if="activeKey === 3">
            <a-form-model-item :wrapper-col="noLabelwrapperCol" style="margin-left: 22px;">
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input
                  class="input"
                  v-model="formData.inDays"
                  type="number"
                  :min="0"
                  :max="30"
                  @input="preInput($event, 'inDays', 30)"
                  placeholder="输入天数"
                  style="margin-left: 0;"
                />
                <a-icon type="info-circle" style="font-size: 14px;" /> </a-tooltip
              >天内有
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input
                  class="input"
                  v-model="formData.days"
                  type="number"
                  :min="0"
                  :max="30"
                  @input="preInput($event, 'days', 30)"
                  placeholder="输入天数"
                />
                <a-icon type="info-circle" style="font-size: 14px;" /> </a-tooltip
              >天连续出入
              <a-select mode="multiple" allowClear v-model="formData.area" placeholder="选择区域" class="select area">
                <a-select-option v-for="item in dictOptions3" :key="item.code" :disabled="item.disabled">
                  {{ item.label }}
                </a-select-option>
              </a-select>
              ，且消费短信金额属于
              <j-dict-select-tag
                class="select"
                v-model="formData.amountType"
                dictCode="amount_type"
                placeholder="请选择"
              />
              且工作及居住地不在此区域的人员
            </a-form-model-item>
            <a-form-model-item label="是否开启">
              <a-switch v-model="formData.enabled" checked-children="开" un-checked-children="关" />
            </a-form-model-item>
          </template>
          <a-form-model-item class="submit-form-model-item" :wrapper-col="noLabelwrapperCol">
            <a-space>
              <a-button type="primary" @click="onSubmit">保存</a-button>
            </a-space>
          </a-form-model-item>
        </a-tab-pane>
      </a-tabs>
    </a-form-model>
  </a-card>
</template>

<script>
import * as caseEventApi from '@/api/wxSmuggle/caseEvent.js'
export default {
  components: {},
  data() {
    return {
      labelCol: { span: 2, offset: 1 },
      wrapperCol: { span: 17 },
      noLabelwrapperCol: { span: 19, offset: 1 },
      tabPosition: 'left',
      activeKey: 1,
      tabTypes: [
        { label: '异常出入岛人群挖掘', key: 1 },
        { label: '可疑船舶与人员关联', key: 2 },
        { label: '消费行为异常人员挖掘', key: 3 }
      ],
      areas: [],
      inAreas: [],
      outAreas: [],
      dictOptions: [],
      // in入岛，out出岛
      trip: 'in',
      form1: {
        enabled: true,
        in: {},
        out: {}
      },
      form2: {
        enabled: true
      },
      form3: {
        enabled: true
      }
    }
  },
  computed: {
    formData() {
      return this['form' + this.activeKey]
    },
    dictOptions3() {
      let datas = []
      if (this.activeKey === 1 && this.trip === 'in') {
        datas = [...this.dictOptions, ...this.inAreas]
      } else if (this.activeKey === 1 && this.trip === 'out') {
        datas = [...this.dictOptions, ...this.outAreas]
      } else {
        datas = [...this.dictOptions, ...this.areas]
      }
      return datas
    }
  },
  mounted() {
    this.getPageListByUnit()
    this.initForm()
  },
  methods: {
    callback(val) {
      this.initForm()
    },
    // 提交保存
    onSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          let api
          if (this.activeKey === 1) {
            api = caseEventApi.digInOutIsland(this.formData)
          } else if (this.activeKey === 2) {
            api = caseEventApi.digBoat(this.formData)
          } else if (this.activeKey === 3) {
            api = caseEventApi.digConsume(this.formData)
          }
          api
            .then(res => {
              if (res.success) {
                let message = res.message ? res.message : '操作成功'
                this.$message.success(message)
              } else {
                this.$message.warn(res.message)
              }
            })
            .catch(e => {
              this.$message.warn('操作失败！')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取配置详情
    initForm() {
      // let result = {
      //   enabled: true,
      //   out: {
      //     area: ["1101","1100"],
      //     beforeHours: "18",
      //     afterMinutes: '21'
      //   }
      // }
      caseEventApi
        .getCryptoDetail({ modeType: this.activeKey })
        .then(res => {
          if (res.success) {
            let result = res.result
            if (result && Object.keys(result).length > 0) {
              let areaBool = result.area && Array.isArray(result.area)
              let inBool = typeof result.in == 'object' && result.in!==null
              let outBool = typeof result.out == 'object' && result.out!==null
              if (result && Object.keys(result).length > 0 && areaBool) {
                this.areas = result.areas
                  .map(item => {
                    if (item.status !== 1) {
                      let status = item.status == 2 ? '(已停用)' : item.status == 3 ? '(已删除)' : ''
                      return {
                        label: item.areaName ? item.areaName + status : '',
                        code: item.code,
                        disabled: false
                      }
                    }
                  })
                  .filter(obj => obj !== undefined)
              }
              if (result && Object.keys(result).length > 0 && inBool) {
                this.inAreas = result.in.areas
                  .map(item => {
                    if (item.status !== 1) {
                      let status = item.status == 2 ? '(已停用)' : item.status == 3 ? '(已删除)' : ''
                      return {
                        label: item.areaName ? item.areaName + status : '',
                        code: item.code,
                        disabled: false
                      }
                    }
                  })
                  .filter(obj => obj !== undefined)
              }
              if (result && Object.keys(result).length > 0 && outBool) {
                this.outAreas = result.out.areas
                  .map(item => {
                    if (item.status !== 1) {
                      let status = item.status == 2 ? '(已停用)' : item.status == 3 ? '(已删除)' : ''
                      return {
                        label: item.areaName ? item.areaName + status : '',
                        code: item.code,
                        disabled: false
                      }
                    }
                  })
                  .filter(obj => obj !== undefined)
              }
              let resultd = {}
              if(inBool) {
                this.$set(resultd, 'in' , result.in)
              } else if(!inBool) {
                this.$set(resultd, 'in' , {})
              }
              if(outBool) {
                this.$set(resultd, 'out' , result.out)
              } else if(!outBool) {
                this.$set(resultd, 'out' , {})
              }
              this['form' + this.activeKey] = Object.assign({}, result, resultd)
            }
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 获取区域列表
    getPageListByUnit() {
      caseEventApi
        .getPageListByUnit({ state: 1, pageNo: 1, pageSize: 99999 })
        .then(res => {
          if (res.success) {
            let result = res.result.records
            this.dictOptions = result.map(v => {
              return {
                label: v.name,
                code: v.id + '',
                disabled: v.state == 1 ? false : true
                // type: v.type
              }
            })
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 异常出入岛人群挖掘
    getForm() {
      let obj =
        this.trip === 'in'
          ? {
              area: this.formData.areaStr.split(','),
              beforeHours: this.formData.beforeHours
            }
          : this.trip === 'out'
          ? {
              area: this.formData.areaStr.split(','),
              beforeHours: this.formData.beforeHours,
              afterMinutes: this.formData.afterMinutes
            }
          : {}
      let form = {
        enabled: this.formData.enabled,
        [this.trip]: obj
      }
      return form
    },
    preInput(e, key, max) {
      console.log(key, max)
      if (Number(e.target.value) < 1) {
        if (this.activeKey === 1) {
          this['form' + this.activeKey][this.trip][key] = 0
        } else {
          this['form' + this.activeKey][key] = 0
        }
      } else if (Number(e.target.value) > max) {
        if (this.activeKey === 1) {
          this['form' + this.activeKey][this.trip][key] = max
        } else {
          this['form' + this.activeKey][key] = max
        }
      } else {
        console.log(e.target.value)
        let value = e.target.value.replace(/\D+/, '')
        if (this.activeKey === 1) {
          if (value > max) {
            this['form' + this.activeKey][this.trip][key] = Number(max)
          } else {
            this['form' + this.activeKey][this.trip][key] = Number(value)
          }
        } else {
          if (value > max) {
            this['form' + this.activeKey][key] = Number(max)
          } else {
            this['form' + this.activeKey][key] = Number(value)
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.input {
  width: 90px;
  margin: 0 6px;
  &.time {
    width: 110px;
  }
}
.select {
  width: 120px;
  margin: 0 10px;
  &.area {
    width: 200px;
  }
}
/deep/.ant-tabs {
  .ant-tabs-content {
    min-height: 550px;
  }
  .submit-form-model-item {
    margin-top: 140px;
    .ant-form-item-control {
      text-align: right;
    }
  }
}
/deep/.numeric-input .ant-tooltip-inner {
  min-width: 32px;
  min-height: 37px;
}

/deep/.numeric-input .numeric-input-title {
  font-size: 14px;
}
/deep/.ant-tabs-tab {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  // padding-left: 0 !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  .tab-img {
    border: 1px rgb(166, 222, 214) solid;
    border-radius: 50%;
    padding: 10px;
    margin-right: 10px;
  }
  &.ant-tabs-tab-active {
    background-color: #eef7ff;
  }
}
</style>
